<template>
    <div class="topic">
        <div class="img-box">
            <img :src="imgUrl" alt="">
        </div>
        <div class="bot-box">
            <ul>
                <li
                    v-for="item in arr"
                    :key="item.id"
                >
                    <div class="content-box">
                        <div class="left-img">
                            <img :src="item.smimg" alt="">
                        </div>
                        <div class="right-info">
                            <p>{{item.title}}</p>
                            <span>{{item.content}}</span>
                        </div>
                    </div>
                </li>
                <li class="look-all">
                    <p>
                        <span>看全部</span><span class="iconfont icon-right-arrow"></span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        imgUrl:{
            type: String,
        },
        arr:{
            type: Array
        }
    },
    name: "Topic",
}
</script>

<style lang="scss" scoped>
.topic{
    width: 100%;
    box-shadow: 0 0 4px 1px #ccc;
    .img-box{
        font-size: 0;
        img{
            width: 100%;
        }
    }
    .bot-box{
        width: 100%;
        ul{
            padding: 0 20px;
            li{
                width: 100%;
                padding:  12px 0 10px 0;
                .content-box{
                    display: flex;
                    height: 88px;
                    .left-img{
                        flex-basis: 30%;
                        flex-grow: 0;
                        flex-shrink: 0;
                        padding-right: 12px;
                        img{
                            width: 100%;
                            border-radius: 8px;
                        }
                    }
                    .right-info{
                        font-size: 0;
                        p{
                            font-size: 16px;
                            padding: 2px 0 10px 0;
                        }
                        span{
                            font-size: 14px;
                            color: #888;
                        }
                    }
                }
            }
            .look-all{
                padding-top: 0;
                p{
                    height: 28px;
                    display: flex;
                    align-items: center;
                    span:first-child{
                        font-size: 16px;
                        margin-right: 8px;
                        color: #444;
                    }
                    span:nth-child(2){
                        font-size: 20px;
                        font-weight: bold;
                        color: #999;
                        transform: translateY(1px);
                    }
                }
            }
        }
    }
}
</style>